<template>
	<view class="indexPage">
		<view class="page">
			<view class="fixedTop">
				<view class="content" v-if="listData.length > 0">
					<view class="card" v-for="(item, index) in listData" :key="index">
						<new-item :ref="'videoRef_'+index" @friendVideoPlay="friendVideoPlay" @share="share" :new="item"
							:myarticle="false" :newIndex='index' @delOver="delOver"></new-item>
					</view>
				</view>

				<nodata top="30%" v-if="listData.length == 0 && loadingOver"></nodata>


				<!-- 佔位 -->
				<!-- <view class="defaultBox" :style="{ height: defaultHeight }"></view>
			<swiper class="swiperBox" :current="currentTab" @change="swiperTab">
					<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation :scroll-into-view="toView">
						<view style="width: 100%;height: 500rpx;opacity:0;">底部占位盒子</view>
					</scroll-view>
			</swiper> -->
			</view>

		</view>
	</view>
</template>

<script>
	const util = require('@/common/refresh.js');
	import newItem from './new-item.vue';
	export default {
		components: {
			newItem
		},
		props: {
			isMy: {
				type: Boolean,
				default: false
			},
			isFixed: {
				type: Boolean,
				default: false
			},
			username: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				loadingOver: false,
				toView: '', //回到顶部id
				currentPage: 'longIndex',
				currentTab: 0, //sweiper所在页
				pages: [1, 1, 1, 1, 1, 1, 1, 1, 1], //第几页存储
				tabTitle: [],
				listData: [],
				defaultHeight: '',
				query: {
					publisher: uni.getStorageSync('username') ? uni.getStorageSync('username') : '',
					isDraft: false,
					pageSize: 10,
					lastDocId: '',
					categoryIds: []
				},
				//导航栏
				tabClick: 0, //导航栏被点击
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft: 0
			};
		},
		onLoad() {
			// console.log('mine onLoad');
			// uni.$on('friendVideoPlay',(index)=>{
			// 	console.log('friendVideoPlay',index);
			// 	this.videoPlay(index)
			// })
		},
		onUnload() {
			// uni.$off('friendVideoPlay',(e)=>{})
		},
		created() {
			// this.getAllCategories();
		},
		methods: {
			friendVideoPlay(e) {
				console.log('friendVideoPlay', e);
				Object.keys(this.$refs).forEach((refKey) => {
					if (refKey.startsWith('videoRef_')) {
						let parts = refKey.split("_");
						let index_ = parseInt(parts[1], 10);
						let indexMatch = (e == index_);
						if (!indexMatch) {
							this.$refs[refKey][0].videoPause();
						}
					}
				});
			},
			share(e) {
				console.log(e)
				this.$emit('share', e)
			},
			// 获取导航栏信息
			getAllCategories() {

				let data = {
					businessName: '',
					endDate: '',
					lastDocId: '',
					pageSize: 10,
					startDate: '',
				}
				this.$api2.getMyPublishedMoment(data).then(res => {
					console.log('listData')

					this.listData = res.list
					console.log(res)
				});
				// let tabBars = [];
				// this.$api.getAllCategories().then(res => {
				// 	if (res) {
				// 		for (let i in res) {
				// 			tabBars.push({
				// 				name: res[i],
				// 				id: i
				// 			});
				// 		}
				// 		this.tabTitle = tabBars;
				// 		this.tabTitle.forEach(item=>{item.listData = [],item.isgetData = false,item.lastDocId = ''})
				// 		//设置导航栏宽度
				// 		this.setNavwidth();
				// 		if(this.username){
				// 			this.query.publisher = this.username
				// 		}
				// 		this.getData(0);
				// 	}
				// });
			},
			delOver(index) {
				this.listData.splice(index, 1)
				this.$forceUpdate()
			},
			setNavwidth() {
				var that = this;
				// 获取设备宽度
				uni.getSystemInfo({
					success(e) {
						if (that.tabTitle.length <= 5) {
							that.isWidth = e.windowWidth / that.tabTitle.length; //宽度除以导航标题个数=一个导航所占宽度
						} else {
							that.isWidth = e.windowWidth / 5;
						}
					}
				});
			},

			getData(index, type) {
				uni.showLoading({
					title: '加载中...'
				});
				this.loadingOver = false
				this.query.lastDocId = this.tabTitle[index].lastDocId
				this.$api.queryArticles(this.query).then(res => {
					console.log(res);
					if (type) {
						this.tabTitle[index].listData = [...this.tabTitle[index].listData, ...res.list];
					} else {
						this.tabTitle[index].listData = res.list;
					}
					this.tabTitle[index].isgetData = true

					if (res.lastDocId) {
						this.tabTitle[index].lastDocId = res.lastDocId;
					} else {
						this.tabTitle[index].lastDocId = ''
					}

					uni.hideLoading();
					this.loadingOver = true
				});
			},
			// 导航栏点击
			longClick(index) {
				if (this.tabTitle.length > 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth; //设置下划线位置
				}
				this.tabClick = index; //设置导航点击了哪一个
				this.isLeft = index * this.isWidth;
				this.changeTab(index);
			},
			toTop() {
				this.toView = '';
				setTimeout(() => {
					this.toView = 'top' + this.currentTab;
				}, 10);
			},

			changeTab(index) {
				this.currentTab = index;

				if (index == 0) {
					this.query.categoryIds = [];
				} else {
					this.query.categoryIds = [this.tabTitle[this.currentTab].id];
				}

				if (this.tabTitle[index].listData.length > 0 && this.tabTitle[index].isgetData == true) {
					return
				} else {
					this.toTop()
				}

				this.getData(index);
				// this.listData = [];
				// this.query.lastDocId = '';
				console.log(this.currentTab);
			},
			// swiper 滑动
			swiperTab: function(e) {
				var index = e.detail.current; //获取索引
				this.longClick(index);
			},
			// 加载更多 util.throttle为防抖函数
			lower1: util.throttle(function(e) {
				console.log(`加载${this.currentTab}`); //currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
				if (this.tabTitle[this.currentTab].lastDocId) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					this.getData(this.currentTab, 1);
				}
			}, 300),

			toSearch() {
				uni.navigateTo({
					url: '/pages/news/search'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.barHeight {
		height: var(--status-bar-height);
		background-color: #de4849;
	}

	.swiperBox {
		height: calc(100vh);
	}

	.search {
		background-color: #de4849;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120rpx;
		padding: 0 30rpx;
		width: 100%;
		z-index: 100;

		.fabu {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-left: 30rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			span {
				font-size: 25rpx;
				color: #fff;
			}
		}
	}

	.indexPage {
		width: 100%;
		font-size: 28upx;
		min-height: 100vh;
		overflow: hidden;
		color: #6b8082;
		position: relative;
		background-color: #f6f6f6;
	}

	.content {
		width: 100%;

		.card {
			margin-bottom: 20rpx;
		}
	}

	.fiexed {
		position: fixed;
		top: 0;
		width: 100%;
		padding-top: 100rpx;
	}

	.nav {
		color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;

		.navTabBox {
			width: 100vw;

			.click {
				color: #de4849 !important;
				font-weight: bold;
			}

			.longTab {
				width: 100%;

				.longItem {
					height: 90upx;
					display: inline-block;
					line-height: 90upx;
					text-align: center;
					color: #999;
				}

				.underlineBox {
					height: 3px;
					width: 20%;
					display: flex;
					align-content: center;
					justify-content: center;
					transition: 0.5s;

					.underline {
						width: 84upx;
						height: 4px;
						background-color: #de4849;
					}
				}
			}
		}
	}
</style>